<template>
  <div style="overflow: hidden">
    <div class="top">
      <div class="pub-info">
        <div style="display: inline-block; height: 60px">
          <el-avatar icon="el-icon-user-solid" :size="60" shape="circle" :src="detail.creatorInfo?.avatar"
            fit="fill"></el-avatar>
        </div>
        <div style="
            display: flex;
            margin-left: 10px;
            flex-direction: column;
            justify-content: center;
          ">
          <div style="margin-bottom: 5px">
            <span class="username">{{
              detail.creatorInfo?.nickName ?? detail.creatorInfo?.userName
            }}&ensp;</span>
          </div>
          <div>
            <span class="created-time">
              发表于&nbsp;{{ detail.createAt }}
            </span>
          </div>
        </div>
      </div>
      <p class="title">
        <span v-if="detail.sectionName" style="color: #97dffd">[{{ detail.sectionName }}]</span>&ensp;{{ detail.title }}
      </p>
    </div>
    <el-divider direction="horizontal"></el-divider>

    <div class="content" style="min-height: 200px; overflow: auto" v-html="detail.content"></div>
    <div class="footer">
      <div style="">
        <span>
          阅读&nbsp;{{ detail.viewNum }}&nbsp; 评论&nbsp;{{
            detail.commentNum
          }}&nbsp; 点赞&nbsp;{{ detail.likedNum }}&nbsp; 收藏&nbsp;{{
            detail.collectNum
          }}&nbsp;
        </span>
      </div>
      <div class="post-operate">
        <!-- <el-button type="text" size="default">
          <i class="iconfont icon-31zhuanfa"></i>
        </el-button> -->
        <el-button type="text" size="default" @click="collectClick">
          <i v-if="!isCollected" class="iconfont icon-shoucang"></i>
          <i v-else class="iconfont icon-shoucang1" style="color: #12bbf6"></i>
        </el-button>
        <el-button type="text" size="default" @click="LikeClick">
          <i v-if="!isLiked" class="iconfont icon-dianzan"></i>
          <i v-else class="iconfont icon-dianzan_kuai" style="color: #12bbf6"></i>
        </el-button>
        <el-dropdown trigger="click" @command="handleCommand">
          <el-button type="text" size="default">
            <i class="iconfont icon-gengduo"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-show="isMy" command="update">
              修改
            </el-dropdown-item>
            <el-dropdown-item v-show="isMy" command="delete">
              删除
            </el-dropdown-item>
            <el-dropdown-item v-show="user" command="reward">
              打赏
            </el-dropdown-item>
            <el-dropdown-item command="report">
              举报
            </el-dropdown-item>

            
          </el-dropdown-menu>
        </el-dropdown>

      </div>
    </div>
    <el-dialog :center="true" title="举报帖子" :visible.sync="reportDialogShow" width="30%" @closed="dialogClosed">
      <el-form :model="form" ref="form" label-width="100px" size="normal">
        <el-form-item label="举报原因：" prop="description" required>
          <el-input v-model="form.description" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="reportDialogShow = false">Cancel</el-button>
        <el-button type="primary" @click="reportSubmit">OK</el-button>
      </span>
    </el-dialog>


    <el-dialog :center="true" title="打赏" :visible.sync="rewardDialogShow" width="30%" @closed="dialogClosed">
    <div >
      <p style="color: #000;font-size:18px;text-align: center;margin-bottom: 20px;">
        剩余积分：{{ user?user.integral:"" }}
      </p>
    </div>
      <el-form :model="rewardForm" ref="form2" label-width="100px" size="normal">
        <el-form-item label="打赏积分：" prop="integral" required>
          <el-input-number v-model="rewardForm.integral"size="normal"
            :min="1" :step="1" :controls="true" controls-position="both" >
          </el-input-number>
          
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="rewardDialogShow = false">Cancel</el-button>
        <el-button type="primary" @click="rewardSubmit">OK</el-button>
      </span>
    </el-dialog>
    

  </div>
</template>

<script>
import * as API from "@/api/post/post";
import * as CollectAPI from "@/api/collect/collect"
import * as ReportAPI from "@/api/report/report"
import * as UserAPI from "@/api/user/user"
export default {
  props: {
    detail: {
      default: {},
    },
    isMy: false,
    user:{
      default:null
    }
  },
  data() {
    return {
      reportDialogShow: false,
      rewardDialogShow:false,
      isLiked: false,
      isCollected: false,
      form: {
        fromType: 0,
        fromId: this.$route.query.id,
        description: null,
      },
      rewardForm:{
        integral:0
      }
    };
  },
  components: {},
  methods: {
    LikeClick() {
      if (this.isLiked) {
        API.cancelLike(this.detail.id).then((res) => {
          this.isLiked = !this.isLiked;
        });
      } else {
        API.likePost(this.detail.id).then((res) => {
          this.isLiked = !this.isLiked;
        });
      }
    },
    collectClick() {
      if (this.isCollected) {
        CollectAPI.cancelCollect({ postId: this.detail.id }).then(res => {
          this.isCollected = !this.isCollected;
        });
      } else {
        CollectAPI.collectPost({ postId: this.detail.id }).then(res => {
          this.isCollected = !this.isCollected;
        })
      }
    },
    updateClick() {
      this.$router.push({ path: "/post/update", query: { id: this.detail.id } })
    },
    deleteClick() {
      API.deleteMyPost({ postId: this.detail.id }).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.$router.push({ path: '/community', query: { id: this.detail.communityId } });
      })
    },
    reportClick() {
      this.reportDialogShow = true;
    },
    rewardClick(){
      this.rewardDialogShow = true;
    },
    dialogClosed() {
      this.form = {
        fromType: 0,
        fromId: this.query.id,
        description: null,
      };
      this.rewardForm = {
        integral:0
      }
      this.$refs.form.resetFields();
      this.$refs.form2.resetFields();
    },
    reportSubmit() {
      this.$refs.form.validate((valid, fields) => {
        if (valid) {
          ReportAPI.addReport(this.form).then(res => {
            this.$message({
              type: "success",
              message: '举报成功'
            });
            this.reportDialogShow = false;
          }).catch(e=>{
            this.reportDialogShow =false;
          })
        }
      })
    },
    rewardSubmit(){
      this.$refs.form2.validate((valid, fields) => {
        if (valid) {
          if(this.user && this.user.integral > this.rewardForm.integral){
            this.$notify({
              type:"error",
              message:"积分余额不足"
            })
          }else{//打赏接口对接
            this.rewardForm.postId = this.detail.id;
            console.log(this.rewardForm)
            API.rewardPost(this.rewardForm).then(res=>{
              this.$message({
                type:"success",
                message:"打赏成功"
              });
              this.rewardDialogShow = false;
            })
          }
        }
      })
    },
    handleCommand(command) {
      switch (command) {
        case "update":
          this.updateClick();
          break;
        case "delete":
          this.deleteClick();
          break;
        case "report":
          this.reportClick();
          break;
        case "reward":
          this.rewardClick();
          break;

      }
    },
    getIsLiked() {
      API.isLiked(this.detail.id).then((res) => {
        // console.log(this.detail)
        this.isLiked = res.data.isLiked;
      });
    },
    getIsColleced() {
      CollectAPI.isCollected({ postId: this.detail.id }).then(res => {
        this.isCollected = res.data.isCollected;
      })
    },
    dialogClosed() {

    }
  },
  watch: {
    detail(newValue, oldValue) {
      this.getIsLiked();
      this.getIsColleced();
    },
  },
  mounted() { },
  beforeRouteEnter(to, from, next) {
    if (!to.query.id) {
      alert('帖子不存在')
    } else {
      next();
    }

  },
};
</script>

<style lang="scss" scoped>
.top {
  height: 120px;
}

.title {
  font-size: 25px;
  font-weight: bold;
  margin: 0;
  color: #444444;
}

.username {
  color: #333333;
  font-size: 15px;
  font-weight: bolder;
}

.level {
  font-size: 14px;
  color: #333333;
}

.created-time {
  color: #939393;
  font-size: 13px;
}

.pub-info {
  display: flex;
  margin-bottom: 20px;
}

.footer {
  height: 40px;
  text-align: center;
  color: #9c9c9c;

  .el-button {
    color: #9c9c9c;
    padding: 0;
    margin: 0;
  }

  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-operate {
  i {
    font-size: 24px;
    margin: 0px 10px;
  }
}
</style>